<template>
  <div class="dialog-form">
    <el-form ref="assetsRef" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="资产名称" prop="assetName">
            <el-input v-model="form.assetName" placeholder="请输入资产名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产编码" prop="assetNumber">
            <el-input v-model="form.assetNumber" placeholder="请输入资产编码" :disabled="type == 2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产类型" prop="assetType">
            <el-select v-model="form.assetType" placeholder="请选择">
              <el-option
                v-for="item in fixed_assets_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产状态" prop="assetStatus">
            <el-select v-model="form.assetStatus" placeholder="请选择">
              <el-option
                v-for="item in fixed_assets_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司" prop="companyId">
            <el-tree-select
              v-model="form.companyId"
              :data="companyList"
              :render-after-expand="true"
              :props="treeProps"
              node-key="id"
              :default-expanded-keys="expandedKeys"
              @change="companyChange"
              check-strictly
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门" prop="departId">
            <el-select v-model="form.departId" placeholder="请选择" clearable>
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.state == 2"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="assetModel">
            <el-input v-model="form.assetModel" placeholder="请输入规格型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="personLiable">
            <el-input v-model="form.personLiable" placeholder="请输入负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存放地点" prop="location">
            <el-input v-model="form.location" placeholder="请输入存放地点" :maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用日期" prop="enablingTime">
            <el-date-picker clearable
                            v-model="form.enablingTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择启用日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资产备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入资产备注，最多100个字" :rows="3" :maxlength="100" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getAssets, addAssets, updateAssets } from "@/api/asset/list"
import { listDepartment } from "@/api/company/department"

const { proxy } = getCurrentInstance()
const { fixed_assets_type, fixed_assets_status } = proxy.useDict("fixed_assets_type", 'fixed_assets_status')

const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps(['companyList'])

const assetsRef = ref()
const type = ref(0)             // 1新增  2修改
const treeProps = {
  label: 'name',
  disabled: (data, node) => {
    return data.state == 2 || data.check == false
  }
}
const expandedKeys = ref([])
const departmentList = ref([])
const form = ref({
  assetNumber: null,
  assetName: null,
  assetType: null,
  assetModel: null,
  location: null,
  personLiable: null,
  companyId: null,
  departId: null,
  assetStatus: null,
  remark: null,
  enablingTime: null,
})
const rules = {
  assetName: [
    { required: true, message: "请输入资产名称", trigger: "blur" }
  ],
  assetNumber: [
    { required: true, message: "请输入资产编码", trigger: "blur" },
    // { pattern: /^[A-Za-z0-9]+$/, message: "资产编码格式不正确，只支持英文和数字", trigger: "blur" }
  ],
  assetModel: [
    { required: false, message: "请输入规格型号", trigger: "blur" }
  ],
  assetType: [
    { required: true, message: "请选择资产类型", trigger: "change" }
  ],
  personLiable: [
    { required: false, message: "请输入负责人", trigger: "change" }
  ],
  location: [
    { required: false, message: "请输入存放地点", trigger: "change" }
  ],
  enablingTime: [
    { required: false, message: "请选择启用日期", trigger: "change" }
  ],
  companyId: [
    { required: true, message: "请选择所属公司", trigger: "change" }
  ],
  departId: [
    { required: true, message: "请选择所属部门", trigger: "change" }
  ],
  assetStatus: [
    { required: true, message: "请选择资产状态", trigger: "change" }
  ]
}

const pageInit = (val, id) => {
  type.value = val
  if (id) {
    getAssets(id).then(response => {
      form.value = response.data
      expandedKeys.value = [form.value.companyId]
      getDepartmentList()
    })
  }
}

function companyChange() {
  form.value.departId = null
  getDepartmentList()
}

/** 部门列表 */
function getDepartmentList() {
  const params = {
    pageNum: 1,
    pageSize: 100,
    companyId: form.value.companyId
  }
  listDepartment(params).then(response => {
    departmentList.value = response.rows
  })
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  assetsRef.value.validate(valid => {
    if (valid) {
      if (type.value == 2) {
        updateAssets(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          emits('confirm')
        })
      } else {
        addAssets(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>